<!DOCTYPE html>
<html id="iframeBody">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>地址列表</title>

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Expires" content="-1">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="description" content="！">
    <meta name="Keywords" content="">

    <link rel="stylesheet" href="${contextPath}/staticwx/qs/css/reset.css">
    <link rel="stylesheet" href="${contextPath}/staticwx/qs/css/global.css">
    <link rel="stylesheet" href="${contextPath}/staticwx/qs/css/iconfont.css">
    <link rel="stylesheet" href="${contextPath}/staticwx/qs/css/address.css">
    <link rel="stylesheet" href="${contextPath}/staticwx/qs/css/popUp.css">
    <link rel="stylesheet" href="${contextPath}/staticwx/qs/css/flex.css">
    <script src="${contextPath}/staticwx/qs/js/jquery-3.0.0.min.js" type="text/javascript"></script>
    <script src="${contextPath}/staticwx/qs/js/jquery.validate.min.js" type="text/javascript"></script>
    <script src="${contextPath}/staticwx/qs/js/public.js" type="text/javascript"></script>

</head>
<body>
<header class="header fixed">
    <div class="hl"  onclick="javascrpt:history.go(-1);"><span class="iconfont icon-zuojiantou"></span></div>
    <div class="hc">我的地址簿</div>
    <div class="hr" onclick="javascrpt:location.href='${contextPath}/wx/index.htm'"><span class="iconfont icon-home"></span></div>
</header>
<section class="addrList" style="width: 100%;">
    <ul id="addrUl">
        <#list addrList as ad>
        <li id="addrli_${ad.id!}">
            <div class="clearfix">
                <span class="fl">${ad.realname!}</span>
                <span class="fr">${ad.tel!}</span>
            </div>
            <p>${ad.provinceName!}${ad.cityName!}${ad.regionName!}${ad.addr!}</p>
            <div class="clearfix">
                <div class="fl checkarea">
                    <#if ad.isdefault??>
                        <#if ad.isdefault==1>
                            <span class="cblue">&nbsp;默认地址</span>
                        </#if>
                        <#if ad.isdefault==0>
                            <span class="cblue" onclick="setDefault('${ad.id!}')">&nbsp;设为默认</span>
                        </#if>
                    </#if>

                </div>
                <span class="fr">
                    <span class="editBtn" onclick="editAddr('${ad.id!}','${ad.realname!}','${ad.tel!}','${ad.provinceid!}','${ad.cityid!}','${ad.regionid!}','${ad.isdefault!}','${ad.addr!}')"><span class="iconfont icon-bianji"></span>&nbsp;编辑</span>
                    &nbsp;&nbsp;
                    <span class="delBtn" onclick="addrDelConfirm('${ad.id!}')"><span class="iconfont icon-lajitong"></span>&nbsp;删除</span>
                </span>
            </div>
        </li>
        </#list>
    </ul>
</section>
<section class="addAddr">
    <header class="header">
        <div class="hl"><span class="iconfont icon-zuojiantou"></span></div>
        <div class="hc">收货地址</div>
    </header>
    <form id="addrForm" class="addrForm">
        <ul>
            <li><label for="">收货人</label>
                <div class="inputArea">
                    <input type="text" placeholder="请输入真实姓名" name="realname" id="realname">
                </div>
            </li>
            <li><label for="">手机号码</label>
                <div class="inputArea">
                    <input type="number" placeholder="请输入手机号码" name="tel" id="tel">
                </div>
            </li>
            <li><label for="">省份</label>
                <div class="inputArea">
                    <select name="provinceid" id="cprov">
                        <option value="">请选择</option>
                        <#list tagList as tag>
                            <option value="${tag.id!}">${tag.tname}</option>
                        </#list>
                    </select>
                </div>
            </li>
            <li><label for="">城市</label>
                <div class="inputArea">
                    <select name="cityid" id="ccity">
                        <option value="">请选择</option>
                    </select>
                </div>
            </li>
            <li><label for="">区域</label>
                <div class="inputArea">
                    <select name="regionid" id="cdiv">
                        <option value="">请选择</option>
                    </select>
                </div>
            </li>
            <li><label for="">详细地址</label>
                <div class="inputArea">
                    <textarea name="addr" id="cdetail" placeholder="请输入详细地址"cdetail></textarea>
                </div>
            </li>
        </ul>
        <div class="btnBlock">
            <input type="hidden" name="memberid" id="addrmid" value="${mid!}"/>
            <input type="hidden" name="id" id="addrid" value=""/>
            <input type="hidden" name="isdefault" id="isdefault" value="0"/>
            <button class="submitPayList addrFormSubmit" type="submit">保存</button>
            <input type="hidden"  id="saveType" value="0"/>
            <input type="hidden"  id="delAddrId" value=""/>
        </div>
    </form>

</section>
<footer class="addressFoot">
    <button class="addAddrBtn">添加收货地址</button>
</footer>
    <div class="popUpMask" id="delAddr">
        <div class="popUpBox" flex="cross:center">
            <div class="popUpOuter">
                <div class="popUpContent">
                    <div class="popUpDetail ac">
                        <br>
                        <img src="${contextPath}/staticwx/qs/images/qus.jpg" alt="" style="width: 25%;">
                        <br>
                        <p>确定删除该地址吗？</p>
                        <br>
                        <div class="btngroup clearfix">
                            <div class="btnchild"><button class="btnSubmit" onclick="delAddr();"  type="button">确定</button></div>
                            <div class="btnchild"><button class="btnCancel" type="button">取消</button></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script>
    $(function(){
        $(".addAddrBtn").click(function(){
            $("#realname").val("");
            $("#addrid").val("");
            $("#tel").val("");
            $("#cdetail").val("");
            $("#cprov").val("");
            $("#ccity").html('<option value="">请选择</option>')
            $("#cdiv").html('<option value="">请选择</option>')
            $("#isdefault").val(0);
            $("#saveType").val(0);//保存类型改为修改
            $(".addAddr").show().animate({"left":"0%"},300);
        });
        $(".addAddr .header .hl").click(function(){
            $(".addAddr").animate({"left":"-100%"},300,function(){
                $(this).hide();
            });
        });
        $(".addressHead .close").click(function(){
            $(".addressBlc").animate({"right":"-100%"},300,function(){
                $(this).hide()
            });
        });
        $("#cprov").on("change",function () {
            var provinceId=$(this).val();
            getChildTag(provinceId,1);
        })
        $("#ccity").on("change",function () {
            var cityId=$(this).val();
            getChildTag(cityId,2);
        })

        $(".psList .radioBtn").on("click",function () {
            $("#payType").val($(this).data("paytype"));
        })
    });
    $("#addrForm").validate({
        ignore:"",
        rules:{
            realname:{required:true},
            tel:{required:true},
            provinceid:{required:true},
            cityid:{required:true},
            regionid:{required:true},
            addr:{required:true}
        },
        messages:{
            realname:{required:"请填写收货人名称！"},
            tel:{required:"请填写手机号码！"},
            provinceid:{required:"请选择省份！"},
            cityid:{required:"请选择城市！"},
            regionid:{required:"请选择区域！"},
            addr:{required:"请填写详细地址！"}
        },
        errorPlacement: function( error, element ) {
            error.insertAfter(element);
        },submitHandler: function(form) {
            saveAddr();
        },
        errorClass : "onError",
        errorElement: "div"
    });
    $(".addrFormSubmit").click(function(){
        $("#addrForm").valid();
    });

    $(".popUpMask .btnCancel").click(function(){
        $(this).parents(".popUpMask").hide();
    });
    /*获取下级区域数据*/
    function getChildTag(parnetId,lv,childId) {
        $.ajax({
            url : '${contextPath}/tag/getChildList.htm',
            data : {
                pid : parnetId
            },
            type : 'post',
            cache : false,
            dataType : 'json',
            success : function(data) {
                var json = $.parseJSON(data);
                if (json.isSuccess == true) {
                    var list=json.tagList;
                    var html='<option valur="">请选择</option>';
                    $.each(list,function (i,tag) {
                        if(childId&&childId==tag.id){
                            html+='<option value="'+tag.id+' selected">'+tag.tname+'</option>';
                        }else{
                            html+='<option value="'+tag.id+'">'+tag.tname+'</option>';
                        }
                    })
                    if(lv==1){
                        $("#ccity").html(html);
                    }else if(lv==2){
                        $("#cdiv").html(html);
                    }

                } else {
                    showMsg(json.errMessage);
                }
            },
            error : function() {
                showMsg("异常");
            }
        });
    }
    /*保存地址簿数据*/
    function saveAddr(){
        $.ajax({
            url : '${contextPath}/wx/addr/saveAddr.htm',
            data : $("#addrForm").serialize(),
            type : 'post',
            cache : false,
            dataType : 'json',
            success : function(data) {
                var json = $.parseJSON(data);
                if (json.isSuccess == true) {
                    var addrvo=json.addrvo;
                    setAddrListData(addrvo);
                } else {
                    showMsg(json.errMessage);
                }
            },
            error : function() {
                showMsg("异常");
            }
        });
    }
    /*设置地址簿 列表内容*/
    function setAddrListData(addrvo){
        var saveType=$("#saveType").val();
        var html='';
        if(saveType==0){
            html+='<li id="addrli_'+addrvo.id+'">';
        }
        html+='<div class="clearfix">';
        html+='<span class="fl">'+addrvo.realname+'</span>';
        html+='<span class="fr">'+addrvo.tel+'</span>';
        html+='</div>';
        html+='<p>'+addrvo.provinceName+addrvo.cityName+addrvo.regionName+addrvo.addr+'</p>';
        html+='<div class="clearfix">';
        html+='<div class="fl checkarea">';
        html+='<span class="cblue" onclick="setDefault('+"'"+addrvo.id+"')"+'">&nbsp;设为默认</span>';
        html+='</div>';
        html+='<span class="fr">';
        html+='<span class="editBtn" onclick="editAddr('+"'"+addrvo.id+"','"+addrvo.realname+"','"+addrvo.tel+"','"+addrvo.provinceid+"','"+addrvo.cityid+"','"+addrvo.regionid+"','"+addrvo.isdefault+"','"+addrvo.addr+"'"+')"><span class="iconfont icon-bianji"></span>&nbsp;编辑</span>';
        html+='&nbsp;&nbsp;'
        html+='<span class="delBtn" onclick="addrDelConfirm('+"'"+addrvo.id+"'"+')"><span class="iconfont icon-lajitong"></span>&nbsp;删除</span>';
        html+=' </span>';
        html+='</div>';
        if(saveType==0){
            html+='</li>';
        }
        if(saveType==0){
            $("#addrUl").html(html+$("#addrUl").html());
        }else{
            $("#addrli_"+addrvo.id).html(html);
        }
        $(".addAddr .header .hl").click();//关闭添加窗口
    }

    function editAddr(id,realname,tel,pid,cid,rid,isdefault,cdetail){
        $("#realname").val(realname);
        $("#addrid").val(id);
        $("#tel").val(tel);
        $("#cdetail").val(cdetail);
        $("#cprov").val(pid);
        setCityData(pid,cid,rid);
        $("#isdefault").val(isdefault);
        $("#saveType").val(1);//保存类型改为修改
        $(".addAddr").show().animate({"left":"0%"},300);
    }
    /*编辑地址-设置城市初始数据*/
    function setCityData(provinceId,cityId,regionId){
        $.ajax({
            url : '${contextPath}/tag/getChildList.htm',
            data : {
                pid : provinceId
            },
            type : 'post',
            cache : false,
            dataType : 'json',
            success : function(data) {
                var json = $.parseJSON(data);
                if (json.isSuccess == true) {
                    var cityList=json.tagList;
                    var html='<option valur="">请选择</option>';
                    $.each(cityList,function (i,tag) {
                        if(cityId==tag.id){
                            html+='<option value="'+tag.id+'" selected>'+tag.tname+'</option>';
                        }else{
                            html+='<option value="'+tag.id+'">'+tag.tname+'</option>';
                        }
                    })
                    $("#ccity").html(html);
                    setRegionData(cityId,regionId);
                } else {
                    showMsg(json.errMessage);
                }
            },
            error : function() {
                showMsg("异常");
            }
        });
    }
    /*编辑地址-设置区域初始数据*/
    function setRegionData(cityId,regionId){
        $.ajax({
            url : '${contextPath}/tag/getChildList.htm',
            data : {
                pid : cityId
            },
            type : 'post',
            cache : false,
            dataType : 'json',
            success : function(data) {
                var json = $.parseJSON(data);
                if (json.isSuccess == true) {
                    var regionList=json.tagList;
                    var html='<option valur="">请选择</option>';
                    $.each(regionList,function (i,tag) {
                        if(regionId==tag.id){
                            html+='<option value="'+tag.id+'" selected>'+tag.tname+'</option>';
                        }else{
                            html+='<option value="'+tag.id+'">'+tag.tname+'</option>';
                        }
                    })
                    $("#cdiv").html(html);
                } else {
                    showMsg(json.errMessage);
                }
            },
            error : function() {
                showMsg("异常");
            }
        });
    }
    /*删除地址确认框*/
    function addrDelConfirm(id){
        $("#delAddr").show();
        $("#delAddrId").val(id);

    }
    /*删除地址确认按钮*/
    function delAddr(){
        var id= $("#delAddrId").val();
        delAddrData(id);
    }
    /*删除地址 提交数据*/
    function delAddrData(id){
        $.ajax({
            url : '${contextPath}/wx/addr/delAddr.htm',
            data : {
                id : id
            },
            type : 'post',
            cache : false,
            dataType : 'json',
            success : function(data) {
                var json = $.parseJSON(data);
                if (json.isSuccess == true) {
                    $("#addrli_"+id).remove();
                    $("#delAddr").hide();
                    showMsg("删除成功");
                } else {
                    showMsg(json.errMessage);
                }
            },
            error : function() {
                showMsg("异常");
            }
        });
    }

    function setDefault(id){
        $.ajax({
            url : '${contextPath}/wx/addr/setDefault.htm',
            data : {
                id : id
            },
            type : 'post',
            cache : false,
            dataType : 'json',
            success : function(data) {
                var json = $.parseJSON(data);
                if (json.isSuccess == true) {
                    location.reload();
                } else {
                    showMsg(json.errMessage);
                }
            },
            error : function() {
                showMsg("异常");
            }
        });
    }
</script>
</body>
</html>